<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="内容">
      <el-input v-model="find" placeholder="标题 or 内容"></el-input>
    </el-form-item>
    <el-form-item label="标签">
      <el-select v-model="tagId" clearable placeholder="请选择">
        <el-option
          v-for="item in tags"
          :key="item.value"
          :label="item.tagName"
          :value="item.tagId">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-row>
    <el-col :span="4" v-for="(o, index) in reads" :key="o.index" :offset="index > 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }">
        <img style="height: 200px;width: 180px" :src="o.picture" class="image" @click="listen(o)">
        <div style="padding: 18px;">
          <span @click="listen(o)">{{o.topic}}</span>
          <div class="bottom clearfix">
            <i class="time">{{o.addTime}}</i>
            <div style="text-align: right">
              <i title="热度" class="el-icon-s-flag"></i>{{o.heat}}
              <i v-if="o.collection==false" class="el-icon-star-off" size="mini" @click="collection(o)"></i>
              <i v-if="o.collection==true" class="el-icon-star-on" size="mini" @click="collection(o)"></i>
            </div>
          </div>
        </div>
      </el-card>
      <br/>
    </el-col>
  </el-row>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="8"
    @current-change="handleCurrentChange"
    style="text-align: right;margin-right: 120px"
  >
  </el-pagination>
</div>
</template>

<script>
import {getAllRead,collectionRead} from "@/api/read";
import DetailSoulSharing from "@/components/soulListen/detailSoulSharing";
import {findAllTags} from "@/api/tag";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "soulSharing",
  components: {DetailSoulSharing},
  data() {
    return {
      reads : [],
      page : 0,
      size: 8,
      find: '',
      show: false,
      total: 0,
      formInline: {
        user: '',
        region: ''
      },
      tags: [],
      tagId: ''
    };
  },
  methods: {
    onSubmit() {
      sendMatomo(15,'心灵分享', '查询', '查询倾听,查询内容:'+this.find+'标签id:'+this.tagId)
      this.getAllRead()
    },
    listen(item) {
      this.show = true
      this.$router.push({name:'detailSoulSharing',query: {readId: item.id}})
    },
    getAllRead() {
      getAllRead(this.page, this.size, this.find, this.tagId).then(res => {
        this.reads = res.body.data.dtos;
        this.total = res.body.data.total;
      })
    },
    collection(item) {
      collectionRead(item.id).then(res => {
        if (res.body.data) {
          item.collection = !item.collection
        }
      })
    },
    handleCurrentChange(page) {
      this.page = page-1
      this.getAllRead()
    },
    getAllTags() {
      findAllTags().then(res => {
        this.tags = res.body.data
      })
    }
  },
  created() {
    this.getAllRead()
    this.getAllTags()
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
